<script setup>
import { reactive, toRefs, ref, watch } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput } from 'element-plus';

const props = defineProps({
  deptBoxShow: Boolean,
  btnChecked: String,
  checkedTreeItem: Object,
});
const { deptBoxShow, btnChecked, checkedTreeItem } = toRefs(props);
const emit = defineEmits(['handleCloseDeptBox', 'handleDepartmentEmit']);

const ruleFormRef = ref(null);
const ruleForm = reactive({
  name: '',
});
const rules = reactive({
  name: [
    { required: true, message: '此项为必填项', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制10', trigger: 'blur' },
  ],
});

watch(
  deptBoxShow,
  (val) => {
    if (val) {
      if (btnChecked.value == 'EDIT') {
        ruleForm.name = checkedTreeItem.value.name;
      } else {
        ruleForm.name = '';
      }
    }
  },
  { deep: true },
);

const closeBoxShowDialog = () => {
  emit('handleCloseDeptBox', false);
};

// 提交
const handleSubmit = () => {
  ruleFormRef.value.validate((err) => {
    if (err) {
      if (btnChecked.value == 'EDIT') {
        ruleForm['id'] = checkedTreeItem.value.id;
      } else {
        ruleForm['deptId'] = checkedTreeItem.value.id;
        ruleForm['level'] = checkedTreeItem.value.level == 1 ? 2 : 3;
      }

      emit('handleDepartmentEmit', ruleForm, btnChecked.value);
    }
  });
};
</script>
<template>
  <div class="active_dept_root">
    <ElDialog
      v-if="deptBoxShow"
      v-model="deptBoxShow"
      :append-to-body="false"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      :align-center="true"
    >
      <template #header>
        <div class="my-header">
          <div class="dialog-title">{{ btnChecked == 'ADD' ? '添加部门' : '编辑部门' }}</div>
          <div class="dialog-close" @click="closeBoxShowDialog()">
            <ElIcon color="#333333">
              <CloseBold />
            </ElIcon>
          </div>
        </div>
      </template>

      <main>
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-position="left"
          status-icon
          label-width="90px"
        >
          <ElFormItem label="部门名称:" prop="name" class="fire_">
            <ElInput v-model="ruleForm.name" placeholder="请输入" maxlength="10" clearable />
          </ElFormItem>
        </ElForm>
      </main>

      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmit()">确定</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.active_dept_root {
  :deep(.el-dialog) {
    width: 770px;
    height: 296px;
    border-radius: 10px;
  }

  :deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .my-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding-left: 32px;
    border-bottom: 1px solid #f8f8f8;

    .dialog-title {
      color: #333333;
      font-size: 18px;
      font-family: Source Han Sans CN;
    }

    .dialog-close {
      cursor: pointer;
    }
  }

  .dialog-footer {
    position: absolute;
    right: 20px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 108px;
      height: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Normal;
      border: 1px solid #00ad93;
      border-radius: 6px;
      cursor: pointer;

      &:first-child {
        margin-right: 20px;
        color: #00ad93;
      }

      &:nth-child(2) {
        color: #ffffff;
        background: #00ad93;
      }
    }
  }

  main {
    padding-top: 20px;
    :deep(.el-input__wrapper) {
      height: 40px;
    }
  }
}
</style>
